<script lang="ts" setup>
import ClipContent from './ClipContent.vue'
import Resizer from '@/components/Common/Resizer.vue'
import { toRefs } from 'vue';
import { useClip } from '@/composables/storyboard/clip';
import { Clip } from '@/core/clip';

const props = defineProps<{
  clip: Clip,
  defaultStyle: { left: number, width: number }
}>()
const { defaultStyle } = toRefs(props)
const {
  style,
  handleResized,
  handleResizeStart,
  handleResizing,
  leftMovementRange,
  rightMovementRange,
  btns,
  handleBtnClick
} = useClip(props.clip, defaultStyle)

</script>
<template>
  <Resizer
    :disabled="!clip.selected && !clip.hovering"
    @resize-start="handleResizeStart"
    @resized="handleResized"
    @resizing="handleResizing"
    :left-range="leftMovementRange"
    :right-range="rightMovementRange"
    :style="style">
    <ClipContent :clip="clip"></ClipContent>
    <div class="clip-item-actions" v-show="clip.selected" style="height: 110px;width: 200px;left: 20px;">
      <div v-for="(btn, index) in btns"
        :key="index"
        :class="['ctrl-btn flex-all-center']"
        :title="btn.title"
        @click="handleBtnClick(btn)">
        <i :class="btn.icon"></i>
      </div>
    </div>
  </Resizer>
</template>
<style lang="stylus" scoped>
.clip-item-actions
  position: absolute;
  top: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  &.hidden
    display: none !important;
  .ctrl-btn
    cursor: pointer;
    font-size: 1.5rem;
    color: #ccc;
    background-color: rgba(0,0,0,.7);
    transition: all .2s ease-in-out;
    border: 1px solid #2d2d2d;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    &:hover
      color: $text-color;
      background-color: $primary-color;
</style>